export default class SlidingRuler {
  constructor(dom: HTMLElement) {
    this.init(dom);
  }

  init(dom: HTMLElement) {
    // 容器样式
    const containerDom = document.createElement('div');
    containerDom.style.width = dom.clientWidth + 'px';
    containerDom.style.overflow = 'hide';
    containerDom.style.overflowX = 'scroll';
    containerDom.style.scrollBehavior;
    containerDom.style.display = 'flex';
    containerDom.className = 'scroll-container';
    // 滚动尺主体
    const uiDom = document.createElement('div');
    uiDom.style.display = 'flex';
    const fragmentDom = document.createDocumentFragment();
    for (
      var slidingRulerItem = 0;
      slidingRulerItem < 1000;
      slidingRulerItem++
    ) {
      var liDom = document.createElement('div');
      liDom.style.width = '2px';
      liDom.style.backgroundColor = '#000';
      liDom.style.marginLeft = '12px';
      if (!((slidingRulerItem + 1) % 5)) {
        liDom.style.height = '20px';
        // 增加刻度线
        const tipDom = document.createElement('div');
        tipDom.innerHTML = `${slidingRulerItem + 1}`;
        liDom.appendChild(tipDom);
      } else {
        liDom.style.height = '10px';
      }
      fragmentDom.appendChild(liDom);
    }
    uiDom.appendChild(fragmentDom);
    containerDom.appendChild(uiDom);
    dom.appendChild(containerDom);
  }
}
